<template>
  <ul>
    <!-- 这里的li样式和active-class样式我在根组件App里就定义了, 没有写scoped会覆盖子组件的样式 -->
    <router-link to="/films/nowPlaying" custom v-slot="{ navigate, isActive }">
      <li @click="navigate" :class="isActive ? 'fqm-active' : ''">
        <span>正在热映</span>
      </li>
    </router-link>

    <router-link to="/films/comingsoon" custom v-slot="{ navigate, isActive }">
      <li @click="navigate" :class="isActive ? 'fqm-active' : ''">
        <span>即将上映</span>
      </li>
    </router-link>
  </ul>
</template>

<style lang="scss" scoped>
ul {
  z-index: 100;
  height: 3.0625rem;
  display: flex;
  background-color: white;
  box-shadow: 0 0.0225rem 0.0225rem rgba(95, 95, 95, 0.411);

  li {
    line-height: 3.0625rem;
    width: 100%;
    text-align: center;
    span {
      padding: 0.625rem;
      font-size: 1.125rem;
    }
  }
}

.fqm-active {
  color: rgb(255, 9, 132);
  background: rgb(241, 241, 241);
  span {
    border-bottom: 0.075rem solid rgba(255, 57, 22, 0.705);
  }
}
</style>
